<!--
 * @Date: 2024-07-11 14:49:26
 * @Autor: 叶世超
 * @LastEditors: 叶世超 yesc163@163.com
 * @LastEditTime: 2024-07-16 11:07:14
 * @FilePath: \reslib-web\src\views\knowledge\character\echartAtlas.vue
 * @Description: 描述
 * @version: 版本
-->
<template>
<!--  <div class="container">-->
<!--    <div id="canvas"></div>-->
<!--    <div class="segmented-box">-->
<!--      <el-segmented-->
<!--        @change="handleRelation()"-->
<!--        v-model="segmentedValue"-->
<!--        :options="optionsSegmented"-->
<!--      />-->
<!--    </div>-->
<!--  </div>-->
</template>

<!--<script setup lang="ts">-->
<!--import echarts from '@/plugins/echarts'-->
<!--import { GraphChart } from 'echarts/charts'-->
<!--echarts.use([GraphChart])-->
<!--import { SunburstChart } from 'echarts/charts'-->
<!--const emit = defineEmits(['leftClickOnNode'])-->
<!--echarts.use([SunburstChart])-->
<!--const props = defineProps({-->
<!--  ckmData: Object,-->
<!--  detailsData: Object-->
<!--})-->
<!--const exp = reactive({-->
<!--  pathUrl: import.meta.env.VITE_URL-->
<!--})-->
<!--console.log('exp.pathUrl', exp.pathUrl)-->
<!--const optionsSegmented = []-->
<!--const segmentedValue = ref('全部')-->

<!--onMounted(async () => {-->
<!--  await dealWithData()-->
<!--  draw()-->
<!--})-->
<!--// 实体数据-->
<!--var datas = []-->
<!--// 关系数据-->
<!--var linkmes = []-->
<!--// 裁剪圆形图片-->
<!--const getImg = (imgSrc) => {-->
<!--  var fun = function (resolve) {-->
<!--    const can = document.createElement('canvas')-->
<!--    const context = can.getContext('2d')-->
<!--    const img = new Image()-->
<!--    img.crossOrigin = ''-->
<!--    img.onload = function () {-->
<!--      let center = {-->
<!--        x: img.width / 2,-->
<!--        y: img.height / 2-->
<!--      }-->
<!--      var diameter = img.height > img.width ? img.width : img.height-->
<!--      can.width = diameter-->
<!--      can.height = diameter-->
<!--      context?.clearRect(0, 0, diameter, diameter)-->
<!--      context?.save()-->
<!--      context?.beginPath()-->
<!--      let radius = img.height > img.width ? img.width / 2 : img.height / 2-->
<!--      context?.arc(radius, radius, radius, 0, 2 * Math.PI)-->
<!--      context?.clip()-->
<!--      context?.drawImage(-->
<!--        img,-->
<!--        center.x - radius,-->
<!--        center.y - radius,-->
<!--        diameter,-->
<!--        diameter,-->
<!--        0,-->
<!--        0,-->
<!--        diameter,-->
<!--        diameter-->
<!--      )-->
<!--      context?.restore()-->
<!--      resolve(can.toDataURL('image/png', 1))-->
<!--    }-->
<!--    img.src = imgSrc-->
<!--  }-->
<!--  var promise = new Promise(fun)-->
<!--  return promise-->
<!--}-->
<!--// ckm数据-->
<!--var testData = reactive<any[]>([])-->
<!--const initCkmData = () => {-->
<!--  props.ckmData.forEach((item, index) => {-->
<!--    testData.push({-->
<!--      entity: item.endEntity,-->
<!--      entityImg: item.asdf.entityPhotoUrl,-->
<!--      feature: item.startEntity,-->
<!--      // featureImg: 'http://192.168.8.190/images/defaultCharacterImage1.png',-->
<!--      featureImg:-->
<!--        props.detailsData.entityPhotoUrl-->
<!--        || exp.pathUrl + '/images/defaultCharacterImage2.jpg'-->
<!--      ,-->
<!--      rela: item.relation,-->
<!--      sen: '1935年10月红一方面军到达陕北，11月中共中央在陕北成立中国工农红军西北革命军事委员会，下设政治保卫局，局长罗瑞卿。',-->
<!--      idSen: 19,-->
<!--      entityType: 'org',-->
<!--      featureType: 'n',-->
<!--      value: 1,-->
<!--      posEntity: 1608,-->
<!--      posFeature: 1624,-->
<!--      posRela: 19-->
<!--    })-->
<!--  })-->
<!--}-->
<!--initCkmData()-->
<!--// 处理ckm数据-->
<!--console.log(testData)-->
<!--// 图谱接口返回数据testData备份-->
<!--const testDataInitial = []-->
<!--Object.assign(testDataInitial, testData)-->
<!--// 右键单击关系分组-->
<!--const resultKeys = reactive([])-->
<!--const relationshipGroupingFcn = () => {-->
<!--  // Object.keys(resultKeys).forEach((key) => (resultKeys[key] = ''))-->
<!--  // 定义初始值为空对象{}-->
<!--  var result = {}-->
<!--  testData.forEach((item) => {-->
<!--    const key = item.rela-->
<!--    if (!result[key]) {-->
<!--      // 若结果对象中不存在该键名，则创建新的数组并赋值给该键名-->
<!--      result[key] = []-->
<!--    }-->
<!--    // 将当前元素添加到相应的数组中-->
<!--    result[key].push(item)-->
<!--    // result[key].push('全部')-->
<!--  })-->
<!--  // Object.values(resultKeys).map((item) => (item = ''))-->
<!--  Object.assign(resultKeys, Object.keys(result))-->
<!--  // console.log(resultKeys)-->
<!--  // console.log(resultKeys.includes("全部"))-->
<!--  if (!resultKeys.includes('全部')) {-->
<!--    resultKeys[resultKeys.length] = '全部'-->
<!--  }-->
<!--  // if (resultKeys.length === 5) for (let i = 0; i < resultKeys.length; i++) if (resultKeys[i] === '') resultKeys[i] = '全部'-->
<!--  // if (resultKeys.length !== 5) for (let i = resultKeys.length; i < 5; i++)  resultKeys[i] = '全部'-->
<!--  Object.assign(optionsSegmented, Object.values(resultKeys))-->
<!--  // optionsSegmented = Object.values(resultKeys)-->
<!--}-->
<!--relationshipGroupingFcn()-->
<!--const dealWithData = async () => {-->
<!--  datas = []-->
<!--  linkmes = []-->
<!--  let entityArr = []-->
<!--  let symbol = ''-->
<!--  for (let i = 0; i < testData.length; i++) {-->
<!--    if (!entityArr.includes(testData[i].entity)) {-->
<!--      if (testData[i].entityImg && testData[i].entityImg != '') {-->
<!--        await getImg(testData[i].entityImg).then((res) => {-->
<!--          symbol = 'image://' + res-->
<!--        })-->
<!--      } else {-->
<!--        symbol = ''-->
<!--      }-->
<!--      datas.push({-->
<!--        name: testData[i].entity,-->
<!--        symbolSize: 100,-->
<!--        // category: 1,-->
<!--        symbol: symbol,-->
<!--        label: {-->
<!--          position: 'bottom',-->
<!--          offset: [0, 5],-->
<!--          fontSize: 14-->
<!--        }-->
<!--      })-->
<!--      entityArr.push(testData[i].entity)-->
<!--    }-->
<!--    if (!entityArr.includes(testData[i].feature)) {-->
<!--      if (testData[i].featureImg && testData[i].featureImg != '') {-->
<!--        await getImg(testData[i].featureImg).then((res) => {-->
<!--          symbol = 'image://' + res-->
<!--        })-->
<!--      } else {-->
<!--        symbol = ''-->
<!--      }-->
<!--      datas.push({-->
<!--        name: testData[i].feature,-->
<!--        symbolSize: 100,-->
<!--        // category: 1,-->
<!--        symbol: symbol,-->
<!--        // symbol: '@/assets/imgs/logo.png',-->
<!--        label: {-->
<!--          position: 'bottom',-->
<!--          offset: [0, 5],-->
<!--          fontSize: 14-->
<!--        }-->
<!--      })-->
<!--      entityArr.push(testData[i].feature)-->
<!--    }-->
<!--    linkmes.push({-->
<!--      source: testData[i].entity,-->
<!--      target: testData[i].feature,-->
<!--      label: {-->
<!--        show: true,-->
<!--        formatter: testData[i].rela,-->
<!--        align: 'center',-->
<!--        verticalAlign: 'middle',-->
<!--        color: '#000000',-->
<!--        fontSize: 14,-->
<!--        fontWight: 'bold',-->
<!--        backgroundColor: '#8cc6ff',-->
<!--        padding: [5, 10],-->
<!--        borderRadius: 10-->
<!--      },-->
<!--      lineStyle: {-->
<!--        color: '#5f8ee7',-->
<!--        opacity: 1,-->
<!--        width: 2-->
<!--      }-->
<!--    })-->
<!--  }-->
<!--}-->
<!--let option = {}-->
<!--const draw = () => {-->
<!--  var myChart = echarts.init(document.getElementById('canvas'))-->
<!--  document.getElementById('canvas').oncontextmenu = function () {-->
<!--    return false-->
<!--  }-->
<!--  option = {-->
<!--    color: ['#83e0ff', '#45f5ce', '#b158ff'],-->
<!--    grid: {-->
<!--      left: '300%',-->
<!--      right: '4%',-->
<!--      bottom: '3%',-->
<!--      containLabel: true-->
<!--    },-->
<!--    series: [-->
<!--      {-->
<!--        type: 'graph',-->
<!--        layout: 'force',-->
<!--        force: {-->
<!--          repulsion: 800, // 排斥力-->
<!--          gravity: 0.05,-->
<!--          edgeLength: [100, 300],-->
<!--          friction: 0.8,-->
<!--          layoutAnimation: true-->
<!--        },-->

<!--        draggable: true,-->
<!--        roam: true,-->
<!--        nodeScaleRatio: 0,-->
<!--        zoom: 1.4,-->
<!--        // center: [5.97, 9.71],-->
<!--        scaleLimit: { min: 0.8, max: 1.5 }, // 比例限制-->
<!--        label: {-->
<!--          normal: { show: true }-->
<!--        },-->
<!--        itemStyle: {-->
<!--          normal: {-->
<!--            // borderColor: '#04f2a7',-->
<!--            borderColor: '#ffffff',-->
<!--            borderWidth: 5,-->
<!--            shadowBlur: 20,-->
<!--            // shadowColor: '#04f2a7',-->
<!--            shadowColor: '#ffffff',-->
<!--            color: '#001c43'-->
<!--          }-->
<!--        },-->
<!--        data: datas,-->
<!--        links: linkmes,-->
<!--        lineStyle: {-->
<!--          normal: {-->
<!--            opacity: 0.9,-->
<!--            width: 5,-->
<!--            curveness: 0-->
<!--          }-->
<!--        },-->
<!--        categories: [{ name: '0' }, { name: '1' }, { name: '2' }],-->
<!--        selectedMode: 'single',-->
<!--        select: {-->
<!--          label: {-->
<!--            backgroundColor: 'blue'-->
<!--          },-->
<!--          disabled: true-->
<!--        }-->
<!--      }-->
<!--    ]-->
<!--  }-->
<!--  myChart.setOption(option)-->

<!--  // 缩放至最大最小标识-->
<!--  let zoomFlag = false-->
<!--  // canvas视角中心-->
<!--  let center = [0, 0]-->
<!--  let centerFlag = false-->
<!--  let centerNow = [0, 0]-->
<!--  let centerReal = [0, 0]-->
<!--  let flag = false-->
<!--  // 缩放至最大最小后，鼠标滚动视角中心偏移量-->
<!--  let centerChange = [0, 0]-->
<!--  // myChart.getDom().children[0].children[0].addEventListener('wheel', function (event) {-->
<!--  //     // debugger-->
<!--  //     event.preventDefault()-->
<!--  //     // console.log(myChart.getOption().series[0].center)-->
<!--  //     zoomFlag = myChart.getOption().series[0].zoom == 0.8 || myChart.getOption().series[0].zoom == 1.5 ? true : false-->

<!--  //     if(zoomFlag && center[0] == 0 && center[1] == 0){-->
<!--  //         if(centerChange[0] != 0 && centerChange[1] != 0){-->
<!--  //             center = [myChart.getOption().series[0].center[0] - centerChange[0], myChart.getOption().series[0].center[1] - centerChange[1]]-->
<!--  //         }else{-->
<!--  //             if(!centerFlag){-->
<!--  //                 center = myChart.getOption().series[0].center-->
<!--  //                 centerFlag = true-->
<!--  //             }else{-->
<!--  //                 center = [myChart.getOption().series[0].center[0] - centerChange[0], myChart.getOption().series[0].center[1] - centerChange[1]]-->
<!--  //             }-->
<!--  //         }-->
<!--  //         // console.log(center,99999)-->
<!--  //     }-->
<!--  //     // if(!zoomFlag){-->
<!--  //     //     if(center[0] != 0 || center[1] != 0){-->
<!--  //     //         var centerTemp = myChart.getOption().series[0].center-->
<!--  //     //         centerChange = [centerTemp[0] - center[0], centerTemp[1] - center[1]]-->
<!--  //     //     }-->
<!--  //     //     // center = [0,0]-->
<!--  //     //     centerReal = []-->
<!--  //     // }-->

<!--  //     setTimeout(() => {-->
<!--  //         if(zoomFlag && (center[0] != 0 || center[1] != 0)){-->

<!--  //             var centerTemp = myChart.getOption().series[0].center-->
<!--  //             centerNow = myChart.getOption().series[0].center-->
<!--  //             centerChange = [centerTemp[0] - center[0], centerTemp[1] - center[1]]-->
<!--  //             // console.log(centerChange,988888)-->
<!--  //         }-->
<!--  //         // if(!zoomFlag && (center[0] != 0 || center[1] != 0)){-->
<!--  //         //     centerChange = [centerNow[0] - myChart.getOption().series[0].center[0], centerNow[1] - myChart.getOption().series[0].center[1]]-->
<!--  //         // }-->

<!--  //         // console.log(center, myChart.getOption().series[0].zoom, myChart.getOption().series[0].center)-->
<!--  //         console.log(myChart.getOption().series[0].zoom)-->
<!--  //         console.log('中心点：',center)-->
<!--  //         console.log('实际中心点：', myChart.getOption().series[0].center)-->
<!--  //         console.log('偏离值：', centerChange)-->
<!--  //         console.log(`\n`)-->
<!--  //     }, 100);-->

<!--  // });-->

<!--  // myChart.on('mouseup',(params)=>{-->
<!--  //     if(center[0] != 0 || center[1] != 0){-->
<!--  //         var centerTemp = myChart.getOption().series[0].center-->
<!--  //         centerChange = [centerTemp[0] - center[0], centerTemp[1] - center[1]]-->
<!--  //     }-->
<!--  //     console.log(999)-->
<!--  // })-->

<!--  // 右击节点，展开菜单-->
<!--  myChart.on('contextmenu', (params) => {-->
<!--    // 根据点击节点获取数据，修改菜单圆心样式-->
<!--    menuStyle.value = {-->
<!--      background: params.event?.target.style.fill,-->
<!--      border: `${params.event?.target.style.lineWidth}px solid ${params.event?.target.style.stroke}`,-->
<!--      'box-shadow': `0px 0px ${params.event?.target.style.shadowBlur}px ${params.event?.target.style.shadowColor}`,-->
<!--      width: params.data.symbolSize - 20 + 'px',-->
<!--      height: params.data.symbolSize + 'px',-->
<!--      top: `calc(50% - ${(params.data.symbolSize + params.event?.target.style.lineWidth) / 2}px)`,-->
<!--      left: `calc(50% - ${(params.data.symbolSize + params.event?.target.style.lineWidth) / 2}px)`,-->
<!--      'line-height': params.data.symbolSize + 'px'-->
<!--    }-->
<!--    // 选中节点名称-->
<!--    selectItem.value = params.data.name-->
<!--    // 选中节点图片-->
<!--    selectItemImg.value = params.data.symbol ? params.data.symbol.replace('image://', '') : ''-->
<!--    // 选中节点图片样式-->
<!--    selectItemImgStyle.value = {-->
<!--      width: params.data.symbolSize + 'px',-->
<!--      height: params.data.symbolSize + 'px'-->
<!--    }-->

<!--    // 重绘图谱-->
<!--    // setTimeout(() => {-->
<!--    option.series[0].draggable = false-->
<!--    option.series[0].roam = false-->
<!--    option.series[0].force.layoutAnimation = false-->
<!--    option.series[0].zoom = myChart.getOption().series[0].zoom-->
<!--    // option.series[0].center =  myChart.getOption().series[0].center-->
<!--    // console.log(myChart.getOption().series[0].center,111)-->
<!--    // option.series[0].center = center[0] != 0 || center[1] != 0 ? [myChart.getOption().series[0].center[0] - centerChange[0], myChart.getOption().series[0].center[1] - centerChange[1]] : myChart.getOption().series[0].center-->
<!--    // centerChange = [centerNow[0] - myChart.getOption().series[0].center[0] + centerChange[0], centerNow[1] - myChart.getOption().series[0].center[1] + centerChange[1]]-->
<!--    // option.series[0].center = [myChart.getOption().series[0].center[0] - centerChange[0], myChart.getOption().series[0].center[1] - centerChange[1]]-->
<!--    // option.series[0].center = [center[0] - (centerNow[0] - myChart.getOption().series[0].center[0]), center[1] - (centerNow[1] - myChart.getOption().series[0].center[1])]-->
<!--    // console.log(myChart.getOption().series[0].zoom)-->
<!--    // console.log('中心点：', center)-->
<!--    // console.log('实际中心点：', myChart.getOption().series[0].center)-->
<!--    // console.log('偏离值：', centerChange)-->
<!--    // console.log('值：',option.series[0].center)-->
<!--    myChart.setOption(option, false)-->
<!--    // center = [0, 0]-->
<!--    // zoomFlag = false-->
<!--    // centerFlag = false-->
<!--    // centerChange = [0, 0]-->
<!--    // }, 100);-->

<!--    // 显示菜单位置-->
<!--    let el = document.getElementById('menu')-->
<!--    el.style.display = 'block'-->
<!--    el.style.top = params.event.event.offsetY - 120 + 'px'-->
<!--    el.style.left = params.event.event.offsetX - 120 + 'px'-->
<!--  })-->
<!--  // 左击节点-->
<!--  myChart.on('click', function (params) {-->
<!--    emit('leftClickOnNode', params.name)-->
<!--  })-->

<!--  // 左击节点-->
<!--  // myChart.on('click', function(params) {-->
<!--  //     console.log(myChart.getOption())-->
<!--  //     var data2 = [-->
<!--  //         {-->
<!--  //             name: params.data.name,-->
<!--  //             children: [-->
<!--  //                 {-->
<!--  //                     name: '111',-->
<!--  //                     value: 15,-->
<!--  //                 },-->
<!--  //                 {-->
<!--  //                     name: '222',-->
<!--  //                     value: 15,-->
<!--  //                 },-->
<!--  //                 {-->
<!--  //                     name: '333',-->
<!--  //                     value: 10,-->
<!--  //                 }-->
<!--  //             ]-->
<!--  //         },-->
<!--  //     ]-->

<!--  //     if(params.componentSubType == 'graph'){-->
<!--  //         // echarts.init(document.getElementById('canvas1')).setOption({-->
<!--  //         //     backgroundColor: '#081b58',-->
<!--  //         //     series: {-->
<!--  //         //         type: 'sunburst',-->
<!--  //         //         data: data2,-->
<!--  //         //         radius: [0, '50%'],-->
<!--  //         //         label: {-->
<!--  //         //         rotate: 'radial'-->
<!--  //         //         }-->
<!--  //         //     }-->
<!--  //         // })-->
<!--  //         // let el = document.getElementById('canvas1')-->
<!--  //         // el.style.display = 'block'-->
<!--  //         // echarts.init(document.getElementById('canvas1')).on('click', function(params) {-->
<!--  //         //     let el1 = document.getElementById('canvas1')-->
<!--  //         //     el1.style.display = 'none'-->
<!--  //         //     datas.push({-->
<!--  //         //         name: '图书分析a',-->
<!--  //         //         symbolSize: 80,-->
<!--  //         //         category: 2,-->
<!--  //         //         itemStyle: {-->
<!--  //         //             normal: {-->
<!--  //         //                 borderColor: '#82dffe',-->
<!--  //         //                 borderWidth: 4,-->
<!--  //         //                 shadowBlur: 10,-->
<!--  //         //                 shadowColor: '#04f2a7',-->
<!--  //         //                 color: '#001c43'-->
<!--  //         //             }-->
<!--  //         //         }-->
<!--  //         //     });-->
<!--  //         //     //更新边的关系-->
<!--  //         //     linkmes.push({-->
<!--  //         //         source: '图书分析a',-->
<!--  //         //         target: '话题分析',-->
<!--  //         //         lineStyle: {-->
<!--  //         //             color: '#5f8ee7',-->
<!--  //         //             opacity: 1,-->
<!--  //         //             width: 2,-->
<!--  //         //         }-->
<!--  //         //     });-->
<!--  //         //     option.series[0].data = datas-->
<!--  //         //     option.series[0].links = linkmes-->
<!--  //         //     myChart.setOption(option)-->
<!--  //         // })-->
<!--  //     }else{-->
<!--  //         datas.push({-->
<!--  //             name: '图书分析a',-->
<!--  //             symbolSize: 80,-->
<!--  //             category: 2,-->
<!--  //             itemStyle: {-->
<!--  //                 normal: {-->
<!--  //                     borderColor: '#82dffe',-->
<!--  //                     borderWidth: 4,-->
<!--  //                     shadowBlur: 10,-->
<!--  //                     shadowColor: '#04f2a7',-->
<!--  //                     color: '#001c43'-->
<!--  //                 }-->
<!--  //             }-->
<!--  //         });-->
<!--  //         //更新边的关系-->
<!--  //         linkmes.push({-->
<!--  //             source: '图书分析a',-->
<!--  //             target: '话题分析',-->
<!--  //             lineStyle: {-->
<!--  //                 color: '#5f8ee7',-->
<!--  //                 opacity: 1,-->
<!--  //                 width: 2,-->
<!--  //             }-->
<!--  //         });-->
<!--  //         option.series[0].data = datas-->
<!--  //         option.series[0].links = linkmes-->
<!--  //         myChart.setOption(option)-->
<!--  //     }-->
<!--  //     if (params.name != null) {-->
<!--  //         //var mes=params.name.replace(/\d+/g,"")-->
<!--  //         // let el = document.getElementById("menu")-->
<!--  //         // el.style.display = 'block'-->
<!--  //         // el.style.top = params.event.event.offsetY + 'px'-->
<!--  //         // el.style.left = params.event.event.offsetX + 'px'-->

<!--  //         console.log(params)-->

<!--  //         if (params.name == "话题分析") {-->
<!--  //             //更新节点-->
<!--  //             datas.push({-->
<!--  //                 name: '图书分析a',-->
<!--  //                 symbolSize: 80,-->
<!--  //                 category: 2,-->
<!--  //                 itemStyle: {-->
<!--  //                     normal: {-->
<!--  //                         borderColor: '#82dffe',-->
<!--  //                         borderWidth: 4,-->
<!--  //                         shadowBlur: 10,-->
<!--  //                         shadowColor: '#04f2a7',-->
<!--  //                         color: '#001c43'-->
<!--  //                     }-->
<!--  //                 }-->
<!--  //             });-->
<!--  //             //更新边的关系-->
<!--  //             linkmes.push({-->
<!--  //                 source: '图书分析a',-->
<!--  //                 target: '话题分析',-->
<!--  //                 lineStyle: {-->
<!--  //                     color: '#5f8ee7',-->
<!--  //                     opacity: 1,-->
<!--  //                     width: 2,-->
<!--  //                 }-->
<!--  //             });-->
<!--  //             //重新画图-->
<!--  //             myChart.setOption({-->
<!--  //                 series: [{-->
<!--  //                     data: datas,-->
<!--  //                     links: linkmes,-->
<!--  //                 }]-->
<!--  //                 // series: option.series-->
<!--  //             });-->

<!--  //         }-->
<!--  //     }-->
<!--  // })-->

<!--  // 左键点击任意位置-->
<!--  myChart.getZr().on('click', function (event) {-->
<!--    console.log('左键点击任意位置')-->
<!--    if (document.getElementById('menu')?.style.display == 'block') {-->
<!--      // closeMenu()-->
<!--    }-->
<!--    if (!event.target) {-->
<!--      // 点击在了空白处，做些什么。-->
<!--    }-->
<!--  })-->
<!--}-->

<!--// 菜单圆心样式-->
<!--let menuStyle = ref({})-->
<!--// 选中节点名称-->
<!--let selectItem = ref()-->
<!--// 选中节点图片-->
<!--let selectItemImg = ref()-->
<!--// 选中节点图片样式-->
<!--let selectItemImgStyle = ref()-->

<!--const handleRelation = async () => {-->
<!--  console.log(testDataInitial)-->
<!--  console.log(segmentedValue.value)-->
<!--  // console.log(relation)-->
<!--  var myChart = echarts.init(document.getElementById('canvas'))-->

<!--  if (segmentedValue.value === '全部') testData = testDataInitial-->
<!--  else {-->
<!--    testData = testDataInitial.filter((item) => item.rela === segmentedValue.value)-->
<!--  }-->
<!--  // relationshipGroupingFcn()-->
<!--  // console.log(resultKeys)-->
<!--  console.log(testData)-->
<!--  // myChart.clear()-->
<!--  // myChart.setOption(option)-->

<!--  await dealWithData()-->
<!--  draw()-->
<!--}-->
<!--</script>-->

<style lang="scss" scoped>
.container {
  position: relative;
  height: 100%;

  .custom-style .el-segmented {
  }

  .segmented-box {
    position: absolute;
    left: 10px;
    bottom: 10px;

    .el-segmented {
      background-color: #203065;
      // --el-segmented-item-selected-bg-color: #04f2a7 !important;
      --el-segmented-item-selected-bg-color: #ffffff !important;
      --el-segmented-item-selected-color: var(--el-text-color-primary);
    }
  }

  #canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    left: -170px;
    top: -20px;
  }
  #canvas1 {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }
}
</style>
